<template>
  <div>
    <!--导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>工程信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图-->
    <el-card>
      <el-button style="margin-bottom:15px" type="primary" size="small" @click="showAddInOutCome">收支添加</el-button>
      <el-button style="margin-bottom:15px" type="primary" size="small" @click="projectInfoDialog = true">项目信息添加</el-button>

      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="收支列表" name="first">
          <el-table show-summary :data="tableData" style="width: 90%" max-height="500" border>
            <el-table-column label="项目名称" prop="groupName"></el-table-column>
            <el-table-column label="项目收入" sortable prop="groupIncome"></el-table-column>
            <el-table-column label="项目支出" sortable prop="groupExpend"></el-table-column>
            <el-table-column label="录入时间" width="180" prop="addTime" sortable></el-table-column>
            <el-table-column label="备注" prop="groupRemarks"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="danger" @click="deleteProject(scope.row.projectId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="second">
          <el-collapse v-model="activeNames" @change="handleChange">
            <div v-for="(group,i1) in groupList" :key="i1">
            <el-collapse-item :title="group.groupName" :name="i1">
              <div class="" style="font-size:20px" v-for="log in logs" :key="log.projectManageLogId" v-if="log.groupName === group.groupName">
                <div>{{log.logDate}}</div>
                <div>收入:+{{log.groupIncome}};支出:-{{log.groupExpend}};结余:￥{{log.balance}};备注:{{log.remark}}</div>
                <div><hr/></div>
              </div>
            </el-collapse-item>
            </div>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="汇总记录" name="third">
          <el-table :data="summaryData"  border show-summary height="450">
            <el-table-column label="项目名称" prop="groupName"></el-table-column>
            <el-table-column label="项目总收入" sortable prop="groupTotalIncome"></el-table-column>
            <el-table-column label="项目总支出" sortable prop="groupTotalExpend"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="项目信息" name="forth">
          <div>
            <div style="display:flex;flex-wrap: wrap;">
              <el-card  style="width:23%;margin:10px;" shadow  v-for="project in projectInfoList" :key="project.projectInfoId">
                <div slot="header">
                  <span>{{project.groupName}}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="showUpdateProjectInfoDialog(project.projectInfoId)">修改信息</el-button>
                </div>
                <div  class="text item">
                  {{project.projectInfo}}
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="收支录入" :visible.sync="projectItemDialog" width="28%" center @close="clear">
        <el-form  :model="itemForm" status-icon  ref="dialogForm" label-width="90px"  :rules="itemRules">
          <el-form-item label="项目名称:" prop="groupName">
            <el-select placeholder="请选择项目" v-model="itemForm.groupName" >
              <el-option
                v-for="item in groupList"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目收入:" prop="projectIncome">
            <el-input v-model="itemForm.projectIncome" ></el-input>
          </el-form-item>
          <el-form-item label="项目支出:" prop="projectExpend">
            <el-input v-model="itemForm.projectExpend" ></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="projectRemarks">
            <el-input :autosize="{ minRows: 4, maxRows: 6}" type="textarea" v-model="itemForm.projectRemarks"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="projectItemDialog = false">取 消</el-button>
            <el-button type="primary" @click="insertData">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="添加项目信息" :visible.sync="projectInfoDialog" width="28%" center @close="clearProjectInfoDialog">
        <el-form :model="projectInfoForm" status-icon  ref="projectDialogForm" label-width="90px" :rules="projectInfoRules">
          <el-form-item label="项目名称:" prop="groupName">
            <el-select placeholder="请选择项目" v-model="projectInfoForm.groupName" >
              <el-option
                v-for="item in groupList"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目信息:" prop="desc">
            <el-input type="textarea" v-model="projectInfoForm.desc" :autosize="{ minRows: 4, maxRows: 6}"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="projectInfoDialog = false">取 消</el-button>
            <el-button type="primary" @click="insertProjectInfoData">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="修改项目信息" :visible.sync="updateProjectInfoDialog" width="28%" center>
        <el-form :model="projectInfoForm" status-icon label-width="90px">
          <el-form-item label="项目名:">
            <el-input v-model="projectInfoForm.groupName" size="small"  disabled></el-input>
          </el-form-item>
          <el-form-item label="项目信息:">
            <el-input type="textarea" v-model="projectInfoForm.desc" :autosize="{ minRows: 4, maxRows: 6}"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateProjectInfoDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateProjectInfoData">确 定</el-button>
        </span>
      </el-dialog>




    </el-card>

  </div>
</template>

<script>
    export default {
      name: "ProjectInformation",
      data(){
          return{
            activeName: 'first',//选项卡
            tableData: [],
            summaryData: [],
            projectInfoList: [],
            activeNames: ['1'],
            logs: [],
            projectItemDialog: false,
            projectInfoDialog: false,
            updateProjectInfoDialog: false,
            projectInfoId: '',
            itemForm: {
              groupName: '',
              projectIncome: '',
              projectExpend: '',
              projectRemarks: '',

            },
            projectInfoForm:{
              groupName: '',
              desc: ''
            },
            groupList: [],
            itemRules: {
              groupName: [
                { required: true, message: '请选择项目名', trigger: 'change' }
              ],
              projectIncome: [
                { required: true, message: '请输入项目收入', trigger: 'blur'}
              ],
              projectExpend: [
                { required: true, message: '请输入项目支出', trigger: 'blur'}
              ],
              projectRemarks: [
                {required: true, message: '备注不能为空', trigger: 'blur'}
              ]
            },
            projectInfoRules: {
              groupName: [
                { required: true, message: '请选择项目名', trigger: 'change' }
              ],
              desc: [
                {required: true, message: '项目信息不能为空', trigger: 'blur'}
              ]

            }

          }
      },
      created() {
        this.getTableData();
        this.getGroupList();
        this.getProjectLogs();
        this.getProjectSummary();
        this.getProjectInfoList();
      },
      methods: {
        async getTableData(){
          const {data: res} = await this.$http.get('projectManage/getProjectInformationList');
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          //console.log(res)
          this.tableData = res.data;
        },
        async getProjectLogs(){
          const {data: res} = await this.$http.get('projectManageLog/getProjectLogs');
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          //console.log(res);
          this.logs = res.data;
        },
        //获取项目列表
        async getGroupList(){
          //获取所有组
          const {data: res} = await this.$http.get('teamGroup/getGroups');
          //console.log(res);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.groupList = res.data;
        },
        //获取项目汇总
        async getProjectSummary(){
          const {data: res} = await this.$http.get('projectManage/getProjectSummary');
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          //console.log(res);
          this.summaryData = res.data.projectSummaryVos;
        },
        //获取项目信息记录
        async getProjectInfoList(){
          const {data: res} = await this.$http.get("projectInfo/getProjectInfo");
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          //console.log(res);
          this.projectInfoList = res.data;

        },
        //修改项目信息
        async updateProjectInfoData(){
          //put请求
          const {data: res} = await this.$http.put('projectInfo/updateProjectInfoById?projectInfoId=' + this.projectInfoId + "&projectInfo=" + this.projectInfoForm.desc);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getProjectInfoList();
          this.updateProjectInfoDialog = false;
          return this.$message.success("修改成功！");

        },
        //展示增加收支弹窗
        showAddInOutCome(){
          //this.getGroupList();
          this.projectItemDialog = true
        },
        //增加项目支出
        insertData(){
          this.$refs.dialogForm.validate(async valid => {
            if (valid){
              var fd = new FormData();
              fd.append("groupName",this.itemForm.groupName);
              fd.append("groupIncome",this.itemForm.projectIncome);
              fd.append("groupExpend",this.itemForm.projectExpend);
              fd.append("groupRemarks",this.itemForm.projectRemarks);
              const {data: res} = await this.$http.post("projectManage/addProjectInformation",fd);
              if (res.status !== 200){
                return this.$message.error(res.msg);
              }
              console.log(res);
              this.projectItemDialog = false;
              this.getTableData();
              this.getProjectLogs();
              this.getProjectSummary();
              return this.$message.success("增加成功！");
            }else {
              return this.$message.error("请填写完整表单！");
            }

          });

        },
        //添加项目信息
        insertProjectInfoData(){
          this.$refs.projectDialogForm.validate(async valid => {
            if (valid){
              var fd = new FormData();
              fd.append("groupName",this.projectInfoForm.groupName);
              fd.append("projectInfo",this.projectInfoForm.desc);
              const {data: res} = await this.$http.post('projectInfo/addProjectInfo',fd);
              if (res.status !== 200){
                return this.$message.error(res.msg);
              }
              this.projectInfoDialog = false;
              this.getProjectInfoList();
              return this.$message.success("增加成功!");
            }else {
              return this.$message.error("请填写完整表单！");
            }

          });
        },
        //删除
        async deleteProject(projectId){
          const confirmResult = await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => {
            return err;
          });
          //当用户确认时，则返回值为字符串：confirm
          //取消时，返回字符串cancel
          if (confirmResult !== 'confirm'){
            return this.$message.info("已取消删除")
          }
          //发送delete请求
          const {data: res} = await this.$http.delete(`projectManage/deleteProjectManage/${projectId}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getTableData();
          this.getProjectLogs();
          this.getProjectSummary();
          return this.$message.success("删除成功！");

        },
        //显示修改项目信息弹窗
        async showUpdateProjectInfoDialog(projectInfoId){
          this.projectInfoId = projectInfoId;
          const {data: res} = await this.$http.get(`projectInfo/getProjectInfoById/${projectInfoId}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res)
          this.projectInfoForm.groupName = res.data.groupName;
          this.projectInfoForm.desc = res.data.projectInfo;
          this.updateProjectInfoDialog = true;
        },
        //关闭后清除表单数据
        clear(){
          this.$refs.dialogForm.resetFields();
        },
        clearProjectInfoDialog(){
          this.$refs.projectDialogForm.resetFields();
        },
        handleClick(tab, event) {
          console.log(tab, event);
        },
        handleChange(val) {
          console.log(val);
        },
      }
    }
</script>

<style scoped>

</style>
